<template>
  <div class="flex flex-wrap gap-4">
    <el-card style="font-size: 15px;font-weight: bold;margin-bottom: 10px" shadow="always">
      <span style="color: #535bf2">|</span> 销售记录
    </el-card>
  </div>
  <div class="salesList" style="padding-top: 30px">
    <el-button type="primary" @click="showAddDialog">新增销售信息</el-button>
    <el-table :data="salesList" style="width: auto" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" show-overflow-tooltip/>
      <el-table-column type="index" label="序号" width="150" show-overflow-tooltip/>
      <el-table-column prop="id" label="ID" width="200" show-overflow-tooltip/>
      <el-table-column prop="productId" label="商品id" width="200" show-overflow-tooltip/>
      <el-table-column prop="salesNum" label="数量" width="200" show-overflow-tooltip/>
      <el-table-column label="操作" width="230">
        <template #default="scope">
          <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
          <el-button  type="success" @click="editView(scope.row.id)">编辑</el-button>
          <el-button type="danger" @click="delSales(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="justify-content: center;margin-top: 10px" background layout="prev, pager,next" :page-size="pageSize" :total="total" @current-change="toPage" @prev-click="toPage" @next-click="toPage"/>
    <el-dialog v-model="dialogVisible" width="1000px" :title="salesQuery.id !=null ? '销售详情' : '新增信息'"
               draggable="true" center>
      <el-form ref="detailForm" :model="salesQuery" label-width="auto"  style="max-width: 800px">
        <el-form-item  v-if="salesQuery.id !=null" label="ID:">
          <span class="detail">{{ salesQuery.id }}</span>
        </el-form-item>
        <el-form-item label="商品id:">
          <el-input v-if="salesQuery.id==null" v-model="salesQuery.productId"/>

          <span class="detail" v-else>{{ salesQuery.productId }}</span>

        </el-form-item>
        <el-form-item label="数量:">
          <el-input v-if="salesQuery.id==null" v-model="salesQuery.salesNum"/>

          <span class="detail" v-else>{{ salesQuery.salesNum }}</span>

        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button v-if="salesQuery.id==null" type="primary" @click="addSales">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="editDialogVisible" width="1000px" :title="dialogTitle" draggable="true" center>
      <el-form ref="detailForm" :model="editSalesQuery" label-width="auto" style="max-width: 800px">
        <el-form-item  label="ID:">
          <span class="detail">{{ editSalesQuery.id }}</span>
        </el-form-item>
        <el-form-item  label="商品名：">
          <!--        如果是添加，下拉菜单-->
          <el-select style="width: 150px"
                     v-model="editSalesQuery.productId"
                     placeholder="请选择商品"
                     @click="loadProduct"
                     clearable>
            <el-option
                v-for="item in orderOptions"
                :key="item.id"
                :label="item.productName"
                :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="数量:">
          <el-input v-model="editSalesQuery.salesNum"></el-input>
        </el-form-item>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="editSalesSubmit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import { messageConfirm, messageTip } from "../util/util.js";
import qs from "qs";


export default {
  name: "SalesView",
  inject: ['reload'],
  data() {
    return {
      salesList: [],
      dialogVisible: false,
      editDialogVisible: false,
      salesQuery: { },
      pageSize: 0,
      total: 0,
      salesIdArray: [],
      dialogTitle: '',
      editSalesQuery:{},
      orderOptions:[{}],
    }
  },
  mounted() {
    this.loadSalesList(1);
    this.loadProduct();
  },
  methods: {
    toPage(current) {
      this.loadSalesList(current);
    },
    handleSelectionChange(salesItemArray) {
      this.salesIdArray = [];
      salesItemArray.forEach((sales) => {
        this.salesIdArray.push(sales.id);
      });
    },
    loadSalesList(current) {
      doGet("/admin/sales", {
        current: current
      }).then((resp) => {
        if (resp.data.code === 200) {
          this.salesList = resp.data.data.list;
          this.pageSize = resp.data.data.pageSize;
          this.total = resp.data.data.total;
        }
      });
    },
    view(id) {
      doGet("/admin/sales/" +id , {
        id: id
      }).then((resp) => {
        console.log(resp)
        if (resp.data.code === 200) {
          this.salesQuery = resp.data.data; // 设置当前行的数据
          this.dialogVisible = true; // 显示对话框
        }
      });
    },
    delSales(id) {
      messageConfirm("是否删除该销售记录？").then(() => {
        doDelete("/admin/sales/" +id , {
          id: id
        }).then((resp) => {
          if (resp.data.code === 200) {
            messageTip("删除成功!", "success");
            this.reload();
          }
        });
      });
    },
    showAddDialog() {
      this.salesQuery = { }; // 清空表单
      this.dialogVisible = true;
    },
    addSales() {
      // let data = qs.stringify(this.salesQuery,{ encode: false })
      // console.log(data)
      doPost("/admin/sales/save",this.salesQuery).then((resp)=>{
        if(resp.data.code===200){
          this.dialogVisible=false
          messageTip("添加成功","success")
          this.reload()
        }else {
          messageTip("添加失败","error")
        }
      })
    },
    editView(id) {
      doGet("/admin/sales/" +id , {
        id: id
      }).then((resp) => {
        if (resp.data.code === 200) {
          this.editSalesQuery= resp.data.data; // 设置当前行的数据
          this.editDialogVisible = true; // 显示对话框
        }
      });
    },
    editSalesSubmit() {
      doPut("/admin/sales", this.editSalesQuery).then((resp) => {
        console.log(resp)
        if (resp.data.code === 200) {
          this.editDialogVisible=false
          messageTip("修改成功！","success")
          this.reload()
        }
      })
    },
    loadProduct() {
      doGet("/admin/product", {current: "1"}).then((resp) => {
        console.log(resp.data.data.list)
        if (resp.data.code === 200) {
          // 将后端的数据信息赋值给 userOptions,数据绑定，后续可以在下拉框中取出
          this.orderOptions = resp.data.data.list
          console.log(this.orderOptions)
        }
      })
    },
  }
};
</script>

<style scoped>
.salesList {
  width: auto;
  height: auto;
  background-color: #ffffff;
}

.detail {
  background-color: #f5f7fa;
  width: 100%;
  padding-left: 15px;
}
</style>